<script setup lang="ts">
import type { BLayoutProps } from './type'
// ------------------use------------------
// #region
withDefaults(defineProps<BLayoutProps>(), {
  fullscreen: false,
  title: '加载中...',
  showTitle: false,
  style: '',
})
const open = defineModel({
  default: false,
})
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region

// #endregion
</script>

<template>
  <Transition
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <div
      v-show="open"
      class="width-vw height-vh b-loading"
      :class="[{ fullscreen }, customClass]"
      :style="[customStyle]"
    >
      <div class="boxs">
        <div class="box">
          <div />
          <div />
          <div />
          <div />
        </div>
        <div class="box">
          <div />
          <div />
          <div />
          <div />
        </div>
        <div class="box">
          <div />
          <div />
          <div />
          <div />
        </div>
        <div class="box">
          <div />
          <div />
          <div />
          <div />
        </div>
      </div>
      <div
        v-show="showTitle"
        class="text"
        :data-text="title"
      />
    </div>
  </Transition>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
